<template>
  <zm-view ref="view">
    <view class="bg-white radius-12 overflow-hidden m-24">
      <u-notice-bar
        direction="column"
        :icon-color="useColor('theme')"
        bg-color="#fffff"
        color="#666666"
        font-size="24rpx"
        :text="notices"
        mode="link"
        @click="showPopup = true"
      ></u-notice-bar>
    </view>
    <zm-list ref="list" :options="options" @query="handleQuery">
      <view v-for="(item, index) in list" :key="index" class="flex items-center justify-between radius-16 mx-24 mb-20 px-24 py-20 bg-white">
        <view class="flex flex-col">
          <text class="font-30 font-bold">{{ item.traceMemo }}</text>
          <text class="text-666 mt-10">{{ item.createTime }}</text>
        </view>
        <text class="font-32 font-bold" :class="{ 'text-price': typeName(item) == '+' }">{{ typeName(item) }}{{ item.integral }}</text>
      </view>
    </zm-list>
    <zm-popup :show.sync="showPopup" mode="bottom" border-radius="16rpx">
      <view slot="header" class="p-24 font-32 font-bold text-center">积分说明</view>
      <view class="px-35 pb-24 flex flex-col">
        <text v-for="(item, index) in notices" :key="index" class="notice-text"> {{ item }} </text>
      </view>
      <view class="p-24">
        <zm-button size="large" @click="showPopup = false">我知道了</zm-button>
      </view>
    </zm-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import manifest from "@/manifest.json"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      manifest,
      list: [],
      options: { emptyText: "暂无积分记录" },
      showPopup: false,
      notices: []
    }
  },
  computed: {
    ...mapGetters(["baseInfo"]),
    typeName() {
      return (item) => {
        switch (item.type) {
          case 1:
            return "+"
          case 2:
            return "-"
        }
      }
    }
  },
  onLoad() {
    this.init()
  },
  methods: {
    init() {
      this.notices = [
        `用户在${this.baseInfo.priSubject || this.manifest.name}平台上进行现金消费购物（如电影购票、卖品购买）可以获得积分，每消费1元可获得1积分，平台将根据活动以及实际情况进行调整，积分的数值精确到小数点后2位(小数点后全部舍弃,不进行四舍五入)。`,
        "100积分可抵扣1元，平台将根据活动以及实际情况进行调整，不同的订单类型能使用的积分比不相同；积分可以累积,1个自然年内有效，逾期自动失效；",
        "若订单发生退货时，抵扣积分根据实际退款数量分摊后退回用户帐户，购物积分根据订单中的商品金额均摊后从用户账户中扣除,如账户积分不足则扣为负值。",
        "用户在使用积分过程中，如果出现违规行为（如作弊领取、恶意套现、刷订单等行为），平台有权取消用户获得本次活动的奖品，撤销违规交易，收回优惠券（含已使用的及未使用的），如给平台造成损失，平台保留向违规用户继续追索的权利。"
      ]
    },
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await this.$api.integral.myIntegralLog({ page, pageSize, type: "0" })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.notice-text {
  color: #666;
  font-size: 26rpx;
  padding-left: 32rpx;
  line-height: 36rpx;
  margin-bottom: 45rpx;
  position: relative;

  &::after {
    left: 0;
    top: 12rpx;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    position: absolute;
    content: "";
    background-color: var(--theme-color);
  }
}
</style>
